<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
<style>
/* .switch-img{ top: 35px;}
.calendar-left{ top: 15px;}
.mui-input-group .mui-input-row { height: 60px;}
.mui-input-row label { line-height: 2.3;}
.mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {margin: 11px auto;} */
</style>
</head>
<body class="mui-fullscreen">
	<!--页面主结构开始-->
	<div id="app" class="mui-views">
		<div class="mui-view">
			<div class="mui-navbar">
			</div>
			<div class="mui-pages">
			</div>
		</div>
	</div>
	<div id="query" class="mui-page">
		<header class="mui-navbar-inner mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" href="${ctxWx}/pu/index"></a>
			<h1 class="mui-center mui-title">景区直通车</h1>
		</header>
		<div class="mui-page-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<%-- <c:if test="${not empty sysAdsList }">
						<div id="slider" class="mui-slider" >
							<div class="mui-slider-group mui-slider-loop">
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="${pageContext.request.contextPath}${sysAdsLast.linkurl }">
										<img src="${sysAdsLast.pageurl }">
										<span class="mui-slider-title">${sysAdsLast.atitle }</span>
									</a>
								</div>
								<c:forEach items="${sysAdsList }" var="sysAds">
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="${pageContext.request.contextPath}/${sysAds.linkurl }">
											<img src="${sysAds.pageurl }">
											<span class="mui-slider-title">${sysAds.atitle }</span>
										</a>
									</div>
								</c:forEach>
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="${pageContext.request.contextPath}/${sysAdsFirst.linkurl }">
										<img src="${sysAdsFirst.pageurl }">
										<span class="mui-slider-title">${sysAdsFirst.atitle }</span>
									</a>
								</div>
							</div>
							<div class="mui-slider-indicator">
								<c:forEach items="${sysAdsList }" var="sysAds" varStatus="i">
									<div class="mui-indicator ${i.index == 0?'mui-active':'' }"></div>
								</c:forEach>
							</div>
						</div>
					</c:if> --%>
					<form id="queryForm" action="${ctxWx }/pu/realsche/list" method="get">
						<input type="hidden" id="cityRecord"/>
						<input type="hidden" name="ordertype" value="${TORDERS_ORDER_TYPE_REALSCHE_SELF_TRAVEL }"/>
						<div class="mui-input-group pos-relative">
							<img class="switch-img" src="${ctxStatic }/modules/wx/images/travel_switch.png"/>
							<div class="mui-input-row switch-row pos-relative switch-input">
								<label>出发地</label>
								<input name="boardaddr" class="departCode" ${empty boardaddr?'data-autocity="yes"':'' } type="hidden" value="${boardaddr }">
								<input class="opt-city-choose departName" ${empty boardaddr?'data-autocity-name="yes"':'' } placeholder="出发地" name="boardaddrName" type="text" value="${boardaddrName }" readonly>
							</div>
							<div class="mui-input-row switch-input">
								<label>目的地</label>
								<input name="offaddr" class="destCode" type="hidden" value="${offaddr }">
								<input class="opt-city-choose destName" placeholder="目的地" name="offaddrName" type="text" value="${offaddrName }" readonly>
							</div>
							<div class="mui-input-row pos-relative">
								<label>出发日期</label>
								<input id="departdateStr" name="departdateStr" type="text" value="${empty departdateStr?today:departdateStr }" readonly>
								<img class="calendar-left" src="${ctxStatic }/modules/wx/images/calendar.png">
							</div>
						</div>
					</form>
					<div class="mui-content-padded">
						<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="subForm();">查询</button>
					</div>
					<div class="fix-bottom2"></div>
				</div>
			</div>
		</div>
	</div>
	<div id="city" class="mui-page">
		<header class="mui-navbar-inner mui-bar mui-bar-nav">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-center mui-title">选择站点</h1>
		</header>
		<div class="mui-page-content">
			<div id="list" class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
				
			</div>
		</div>
	</div>
	<c:set var="include_location" value="yes"/>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script src="${ctxStatic }/mui/js/mui.view.js"></script>
	<script src="${ctxStatic }/mui/js/mui.indexedlist.js"></script>
	<script src="${ctxStatic }/mui/js/mui.picker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.dtpicker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.poppicker.js"></script>
	<script>
		var indexed_list_first = true; // 索引列表是否已经初始化
		
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#query'
		});
		
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city' && indexed_list_first) {
					// 初始化站点数据
					var header = document.querySelector('header.mui-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					window.indexedList = new mui.IndexedList(list);
					indexed_list_first = false;
				}
			});
		})(mui);
		
		$(function(){
			// 初始化站点数据和事件
			getSiteData();
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});
			
			// 日期选择器
			var oldDate = ${oldDateStr};
			$('#departdateStr').click(function(event){
				var picker = new mui.DtPicker({
						"value":"${today }",
						"beginDate": oldDate,
						"type":"date"});
				picker.show(function(rs) {
					$('#departdateStr').val(rs.text);
					picker.dispose();
				});
			});
			// 选择城市
			$('.opt-city-choose').on('tap',function(event){
				if($(this).hasClass('departName')) {
					$('#cityRecord').val('depart');
				}
				if($(this).hasClass('destName')) {
					$('#cityRecord').val('dest');
				}
				viewApi.go('#city');
			});
			
			// 出发地和目的地交换
			$('.switch-img').on('click',function(){
				var departcitycode = $('.departCode');
				var departcityname = $('.departName');
				var destcitycode = $('.destCode');
				var destcityname = $('.destName');
				var temp = departcitycode.val();
				departcitycode.val(destcitycode.val());
				destcitycode.val(temp);
				temp = departcityname.val();
				departcityname.val(destcityname.val());
				destcityname.val(temp);
			});
			
		});
		
		function subForm() {
			var msg = '';
			var boardaddrName = $('input[name=boardaddrName]').val();
			var offaddrName = $('input[name=offaddrName]').val();
			if(boardaddrName == ''){
				msg = '请填写出发地';
			} else if(offaddrName == ''){
				msg = '请填写目的地';
			} 
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#queryForm').submit();
			}
		}
		
		function getSiteData(tab) {
			$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
			$.post('${ctxWx}/data/site/siteJson',{spottypes:'0,2'}, function(data) {
				var html = '';
				for(var i=0; i<data.length; i++) {
					var item = data[i];
					html += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
					for(var j=0; j<item.list.length; j++) {
						var site = item.list[j];
						html += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
						html += site.sitename;
						html += '</li>';
					}
				}
				$('#indexListContent').html(html);
			});
		}
		
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'depart') {
				$('.departCode').val(item.attr('data-value'));
				$('.departName').val(item.attr('data-name'));
			} else if(cityRecord.val() == 'dest') {
				$('.destCode').val(item.attr('data-value'));
				$('.destName').val(item.attr('data-name'));
			} else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#query');
		}
	</script>
</body>
</html>